﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <meta name="keywords" content="jQuery, jQuery Validation, Validator, Vlidation Widget, jqxValidator" />
    <meta name="description" content="This page represents the help documentation of the jqxValidator widget." />
    <title>jqxValidator API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>rules</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets jqxValidator rules. Format of a single rule is as follows: 
                            <p>
                                <pre><code>
{ input: 'selector-of-the-input', 
    message: 'Custom message on error', 
    action: 'Custom action (keyup, change...etc)', 
    rule: 'Build rule (ssn, phone, email...) or custom function', 
    position: 'Position of the hint (format pos:x,y)', 
    hintRender: 'Function for hint rendering' }
                                </code></pre>
                            </p>
                            Let's look at all different properties of a single rule. <br />The input property must be selector of the input you want to validate (we recommend to use ids - example: '#userInput'). <br />The message property is the custom
                            message which will popup, on validation error, for the current rule. <br />Action is a string which is the event on which you want to validate the input (for example click, mouseup, blur, keyup...). <br />The rule property is defining the way you want to validate the input. <br /><br />In jqxValidator there are 
                            built in rules like: 'ssn', 'email', 'required', 'phone', 'zipCode', 'maxLength=len', 'minLength=len', 'length=max,min'. In the last three validation rules the strings after the "=" are the rule parameters, for example: 'maxLength=13'. You can also write a function
                            for a custom rule.<br /><br />
'ssn' - 'Social Security Number' Requires input like: ___-__-____<br />
'email' - requires valid e-mail address.<br />
'required' - requires a CheckBox or Radio Button to be checked or any value to be entered in an Input.<br />
'phone' - requires input like: (___)___-____<br />
'zipCode' - requires a valid zip code like: ___-__-____<br />
'maxLength=len' - restricts the maximum input characters to 'len'.<br />
'minLength=len' - restricts the minimum input characters to 'len'<br />
'length=min,max' - restricts the input length to a specific range.<br />               
                            
                            <br /> <br />Hint positions are as follows: 'left', 'right', 'top', 'bottom', 'bottomcenter', 'topcenter', 'topleft', 'topright', 'bottomleft', 'bottomright'. If you wish to set also an offset you can pass the position like: 'topleft:15,3'. This is going to position your
                            message popup in top-left of the input with offset: left - 15px, top - 3px.<br /><br /> The last property is hintRender. This is function used for hint rendering. If you don't pass one the default is going to be used. Notice that the position and hintRender are optional. If you don't set them the default values are going to be used.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>rules</code> property specified.
                        </p>
                        <pre><code>
$('#form').jqxValidator( { rules: [{ input: '#passwordInput', 
                                        message: 'The password is required!',
                                        action: 'keyup', 
                                        rule: 'required' },
                                    { input: '#passwordInput', 
                                        message: 'Your password must be between 4 and 12 characters!', 
                                        action: 'keyup', 
                                        rule: 'length=4,12' }] } );</code></pre>
                        <br />
                        Custom Rule Definition. The function returns true or false depending on whether the input is correct or not.
                        <pre><code>
{ input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function () {
    var date = $('#birthInput').jqxDateTimeInput('value');
    var result = date.dateTime.getFullYear() >= 1900 && date.dateTime.getFullYear() <= 2012;
    return result;
}
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>scroll</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets whether the jqxValidator will scroll the page to the first invalid input.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>scroll</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator( { scroll: false } );</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>focus</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets whether the jqxValidator will focus the first invalid input.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>focus</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator( { focus: false } ); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>scrollDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    300
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the scroll duration, to the first invalid input, when the validation fails. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>scrollDuration</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ scrollDuration: 500 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>scrollCallback</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets a callback function which will be executed when the scroll, to the first invalid input, ends. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>scrollCallback</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ scrollCallback: function () { alert('Scrolled'); } }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>position</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   'right'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Gets or sets the default position of the hints. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>position</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ position: 'topcenter' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>arrow</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets whether the arrow of the hints will be shown. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>arrow</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator( { arrow: false } ); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>animation</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   'fade'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets or gets the animation of showing, hiding the hints. Possible values are 'fade' and 'none'.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>animation</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ animation: 'none' }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>animationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   150
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets the duration of the animation used for showing/hiding the hints.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>animationDuration</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ animationDuration: 300 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>closeOnClick</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                            Sets or gets whether the hints will be closed when the user click on them.</p>
                            <h4>
                                Code examples</h4>
                            <p>
                                Initialize a jqxValidator with the <code>closeOnClick</code> property specified.
                            </p>
                        <pre><code>
                            $('#form').jqxValidator({ closeOnClick: false });
                        </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>onError</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets callback which will be called on validation error.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>onError</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ onError: function () { alert('You havent filled the form correctly!'); } }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>onSuccess</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets the callback which will be executed on success.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxValidator with the <code>onSuccess</code> property specified.
                        </p>
                        <pre><code>$('#form').jqxValidator({ onSuccess: function () { alert('Success!'); } }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>validationError</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            validationError is triggered when the form is validated with some errors.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the validationError event.
                        </p>
                        <pre><code>$('#form').bind('validationError', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>validationSuccess</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            validationError is triggered when the form is validated whithout any errors.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the validationSuccess event.
                        </p>
                        <pre><code>$('#form').bind('validationSuccess', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>validate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Validating the whole form.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the validate method.
                        </p>
                        <pre><code>
$('#form').jqxValidator('validate', element);
                        </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>validateInput</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Validates a single input. This method accepts a single parameter which is selector of the input you want to validate.
                         Notice that this selector should be the same like the one you've passed in the rules array.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the validateInput method.
                        </p>
                        <pre><code>
$('#form').jqxValidator('validateInput', '#passwordInput');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>hideHint</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Hide all hints for a specific input.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hideHint method.
                        </p>
                        <pre><code>
$('#form').jqxValidator('hideHint', '#passwordInput');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>hide</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Hiding all hints for the current form.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hide method.
                        </p>
                        <pre><code>
$('#form').jqxValidator('hide');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>updatePosition</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Updating the positions of all hints. This is useful for example on window resize.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the checkItem method.
                        </p>
                        <pre><code>
$('#form').jqxValidator('updatePosition');
                         </code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
